import {
  Row,
  Col,
  Transfer,
  Flex,
  Typography,
  Form,
  Input,
  Button,
  message
} from 'antd'
import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { userGroupAdd, userGroupInfo, userTagList ,userGroupUpdate} from '../service/user'
export default function UserAddCrowd() {
  const navigate = useNavigate()
  const { id } = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  const [form] = Form.useForm()
  const [title, setTitle] = useState(isEditing ? '编辑人群' : '新建人群')
  // 穿梭机数据
  const [mockData, setMockData] = useState([])
  const [isTagsLoaded, setIsTagsLoaded] = useState(false);
  const [targetKeys, setTargetKeys] = useState(
      mockData.filter((item) => item.chosen).map((item) => item.key)
  )
  useEffect(() => {
    ;(async () => {
      try {
        const res = await userTagList()
        console.log('标签数据响应:', res)

        if (res && res.code === '0' && res.data) {
          const tagsData = res.data
          let processedTags = []

          // 根据实际返回的数据结构处理标签
          if (Array.isArray(tagsData)) {
            // 如果是直接的标签数组
            processedTags = tagsData.map(item => ({
              key: item.id?.toString() || item.tagId?.toString() || '',
              title: item.tagName || item.name || '',
              chosen: false
            })).filter(tag => tag.key && tag.title) // 过滤掉无效标签
          } else if (typeof tagsData === 'object') {
            // 如果是嵌套的对象结构，需要根据实际返回格式调整
            const possibleArrays = [
              tagsData, // 假设对象本身就是标签集合
              tagsData.id,
              tagsData.tagType,
              tagsData.coding,
              tagsData.status, // 用户表可能的字段
              tagsData.tagName // 用户标签可能的字段
            ]

            for (const arr of possibleArrays) {
              if (Array.isArray(arr)) {
                processedTags = arr.map(item => ({
                  key: item.id?.toString() || item.tagId?.toString() || item.userId?.toString() || '',
                  title: item.tagName || item.name || item.userName || '',
                  chosen: false
                })).filter(tag => tag.key && tag.title)

                if (processedTags.length > 0) break; // 找到有效数据后停止查找
              }
            }

            // 3. 如果还是没有数据，尝试直接遍历对象属性
            if (processedTags.length === 0) {
              for (const key in tagsData) {
                const item = tagsData[key];
                if (item && typeof item === 'object') {
                  processedTags.push({
                    key: item.id?.toString() || key.toString(),
                    title: item.tagName || item.name || item.userName || key,
                    chosen: false
                  });
                }
              }
              processedTags = processedTags.filter(tag => tag.key && tag.title);
            }
          }

          console.log('处理后的标签数据:', processedTags)

          if (processedTags.length === 0) {
            console.log('未能从响应中提取有效标签数据')
            message.info('当前无可用标签')
          }

          setMockData(processedTags)
          setIsTagsLoaded(true);
        } else {
          console.log('标签接口返回数据为空或格式不正确')
          message.warning('暂无标签数据')
        }
      } catch (error) {
        console.error('获取标签数据失败:', error)
        console.error('错误详情:', error.response?.data || error.message)
        message.error('获取标签数据失败，请稍后重试')
      }
    })()
  }, [])
  useEffect(() => {
    if (isEditing && id && isTagsLoaded) {
      ;(async () => {
        try {
          // 获取人群详情
          const res = await userGroupInfo(id)
          console.log('人群详情数据:', res)

          if (res && res.code === '0' && res.data) {
            const crowdData = res.data
            // 填充表单数据
            form.setFieldsValue({
              groupName: crowdData.groupName || '',
              groupDescription: crowdData.groupDescription || '',
              userNumber: crowdData.userNumber || ''
            })

            // 设置标签选中状态
            if (crowdData.tags && crowdData.tags.length > 0) {
              const validSelectedTagKeys = crowdData.tags
                  .map(tag => tag.id.toString())
                  .filter(tagId => mockData.some(tag => tag.key === tagId));

              setTargetKeys(validSelectedTagKeys);
              console.log('设置的目标标签ID:', validSelectedTagKeys);
            }
          } else {
            console.error('获取人群详情失败:', res)
            message.error('获取人群详情失败，请稍后重试')
          }
        } catch (error) {
          console.error('获取人群详情异常:', error)
          message.error('获取人群详情失败，请稍后重试')
        }
      })()
    }
  }, [isEditing, id, form,isTagsLoaded, mockData])

  return (
      <>
        <Row className="info">
          <Col span={24}>
            <Flex justify={'space-between'}>
              <Typography.Title level={3}>{title}</Typography.Title>
            </Flex>
          </Col>
        </Row>
        <Form
            labelCol={{
              span: 2
            }}
            wrapperCol={{
              span: 12
            }}
            style={{ width: '100%', marginTop: 30 }}
            onFinish={(formValues) => {
              // 创建提交数据
              const submitValues = { ...formValues }
              submitValues.tagIds = ''
              // 获取id，并用逗号分开
              targetKeys.forEach((item) => {
                submitValues.tagIds += item + ','
              })
              if (submitValues.tagIds) {
                submitValues.tagIds = submitValues.tagIds.substring(0, submitValues.tagIds.length - 1)
              }

              // 判断是编辑还是添加
              if (isEditing) {
                // 编辑模式
                ;(async () => {
                  try {
                    const editValues = { ...submitValues, id }
                    const res = await userGroupUpdate(editValues)
                    console.log('编辑人群响应:', res)
                    if (res && res.code === '0') {
                      message.success('编辑成功')
                      setTimeout(() => {
                        navigate('/admin/user/crowd')
                      }, 1000)
                    } else {
                      message.error('编辑失败：' + (res?.message || '未知错误'))
                    }
                  } catch (error) {
                    console.error('编辑人群异常:', error)
                    message.error('编辑失败，请稍后重试')
                  }
                })()
              } else {
                // 新增模式
                ;(async () => {
                  try {
                    const res = await userGroupAdd(submitValues)
                    console.log('新增人群响应:', res)
                    if (res && res.code === '0') {
                      message.success('新增成功')
                      setTimeout(() => {
                        navigate('/admin/user/crowd')
                      }, 1000)
                    } else {
                      message.error('新增失败：' + (res?.message || '未知错误'))
                    }
                  } catch (error) {
                    console.error('新增人群异常:', error)
                    message.error('新增失败，请稍后重试')
                  }
                })()
              }
            }}
            form={form}
        >
          <Row className="container" style={{ marginBottom: 0 }}>
            <Col span={24}>
              <Typography.Title level={4}>基本信息</Typography.Title>
            </Col>
            <Col span={24}>
              <Form.Item
                  label="人群名称"
                  name="groupName"
                  rules={[{ required: true, message: '请输入人群名称' }]}
              >
                <Input
                    maxLength={30}
                    showCount
                    placeholder="请输入人群名称 "
                    style={{ width: 500 }}
                />
              </Form.Item>
              <Form.Item
                  label="人群描述"
                  name="groupDescription">
                <Input.TextArea
                    maxLength={100}
                    showCount
                    style={{ width: 500, height: 100 }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row className="container" style={{ marginTop: 0, marginBottom: 0 }}>
            <Col span={24}>
              <Typography.Title level={4}>人群特征</Typography.Title>
            </Col>
            <Col span={24}>
              <Row>
                <Col span={13} offset={1} style={{ display: 'flex' }}>
                  <Transfer
                      dataSource={mockData}
                      showSearch
                      titles={['标签', '标签']}
                      targetKeys={targetKeys}
                      onChange={(newValue) => {
                        console.log(newValue)
                        setTargetKeys(newValue)
                      }}
                      render={(item) => item.title}
                  />
                </Col>
              </Row>
            </Col>
          </Row>
          <Row className="container" style={{ marginTop: 0, marginBottom: 0 }}>
            <Col span={24}>
              <Form.Item label="预估人数" name="userNumber">
                <Input style={{ width: 200, marginRight: 10 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row className="container" style={{ marginTop: 0, paddingBottom: 100 }}>
            <Col span={4} offset={1}>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
              {/* 重置按钮 */}
              <Button style={{ marginLeft: 10 }} htmlType="reset">
                重置
              </Button>
            </Col>
          </Row>
        </Form>
      </>
  )
}
